<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 头部区域 -->
		<view class="header">
			<view class="header-title">轻松记账</view>
			<view class="header-date">{{ currentMonth }}月账单</view>
		</view>

		<!-- 账单概览 -->
		<view class="overview-card">
			<view class="overview-title">本月支出</view>
			<view class="overview-amount">¥{{ totalExpense.toFixed(2) }}</view>
			<view class="overview-stats">
				<view class="stat-item">
					<view class="stat-value">¥{{ foodExpense.toFixed(2) }}</view>
					<view class="stat-label">餐饮</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">¥{{ transportExpense.toFixed(2) }}</view>
					<view class="stat-label">交通</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">¥{{ shoppingExpense.toFixed(2) }}</view>
					<view class="stat-label">购物</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">¥{{ otherExpense.toFixed(2) }}</view>
					<view class="stat-label">其他</view>
				</view>
			</view>
		</view>

		<!-- 快速记账 -->
		<view class="quick-add-card">
			<view class="card-title">快速记账</view>
			<view class="form-group">
				<input type="digit" v-model="newExpense.amount" class="amount-input" placeholder="输入金额" />
				<view class="category-selector">
					<view v-for="(category, index) in categories" :key="index" class="category-item"
						:class="{ active: newExpense.category === category.value }"
						@tap="newExpense.category = category.value">
						{{ category.label }}
					</view>
				</view>
				<input type="text" v-model="newExpense.remark" class="remark-input" placeholder="备注(选填)" />
				<button class="add-btn" @tap="addExpense">记一笔</button>
			</view>
		</view>

		<!-- 最近记录 -->
		<view class="recent-records">
			<view class="card-title">最近记录</view>
			<view class="record-list">
				<view class="record-item" v-for="(record, index) in recentRecords" :key="index">
					<view class="record-left">
						<view class="record-category">{{ getCategoryLabel(record.category) }}</view>
						<view class="record-date">{{ record.date }}</view>
						<view class="record-remark" v-if="record.remark">{{ record.remark }}</view>
					</view>
					<view class="record-amount">¥{{ record.amount.toFixed(2) }}</view>
				</view>
				<view class="no-records" v-if="recentRecords.length === 0">
					暂无记录，快去记一笔吧~
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<view class="tab-icon">📊</view>
				<view class="tab-label">账单</view>
			</view>
			<view class="tab-item">
				<view class="tab-icon">📝</view>
				<view class="tab-label">记账</view>
			</view>
			<view class="tab-item">
				<view class="tab-icon">📈</view>
				<view class="tab-label">统计</view>
			</view>
			<view class="tab-item">
				<view class="tab-icon">👤</view>
				<view class="tab-label">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				currentMonth: new Date().getMonth() + 1,
				totalExpense: 1256.78,
				foodExpense: 458.50,
				transportExpense: 125.00,
				shoppingExpense: 568.28,
				otherExpense: 105.00,
				categories: [{
						label: '餐饮',
						value: 'food'
					},
					{
						label: '交通',
						value: 'transport'
					},
					{
						label: '购物',
						value: 'shopping'
					},
					{
						label: '其他',
						value: 'other'
					}
				],
				newExpense: {
					amount: '',
					category: 'food',
					remark: ''
				},
				recentRecords: [{
						category: 'food',
						amount: 38.50,
						date: '今天 12:30',
						remark: '午餐'
					},
					{
						category: 'transport',
						amount: 5.00,
						date: '今天 08:15',
						remark: '公交车'
					},
					{
						category: 'shopping',
						amount: 128.00,
						date: '昨天 16:45',
						remark: '超市购物'
					},
					{
						category: 'other',
						amount: 50.00,
						date: '昨天 10:20',
						remark: '充值话费'
					},
					{
						category: 'food',
						amount: 65.00,
						date: '03-12 19:30',
						remark: '晚餐'
					}
				]
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			console.log('测试数据！！！');
		},
		methods: {
			// 添加新支出
			addExpense() {
				if (!this.newExpense.amount || isNaN(this.newExpense.amount) || parseFloat(this.newExpense.amount) <= 0) {
					uni.showToast({
						title: '请输入有效金额',
						icon: 'none'
					})
					return
				}

				// 创建新记录
				const amount = parseFloat(this.newExpense.amount)
				const newRecord = {
					category: this.newExpense.category,
					amount: amount,
					date: '刚刚',
					remark: this.newExpense.remark
				}

				// 添加到记录列表
				this.recentRecords.unshift(newRecord)

				// 更新总支出
				this.totalExpense += amount

				// 更新分类支出
				switch (this.newExpense.category) {
					case 'food':
						this.foodExpense += amount
						break
					case 'transport':
						this.transportExpense += amount
						break
					case 'shopping':
						this.shoppingExpense += amount
						break
					case 'other':
						this.otherExpense += amount
						break
				}

				// 重置表单
				this.newExpense = {
					amount: '',
					category: 'food',
					remark: ''
				}

				// 显示成功提示
				uni.showToast({
					title: '记账成功',
					icon: 'success'
				})
			},

			// 获取分类标签
			getCategoryLabel(value) {
				const category = this.categories.find(item => item.value === value)
				return category ? category.label : '未知'
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f8fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
		color: #333;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.status-bar {
		background-color: #6bc7b6;
	}

	.header {
		background-color: #6bc7b6;
		padding: 30rpx;
		padding-bottom: 60rpx;
		color: #fff;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.header-date {
		font-size: 28rpx;
		margin-top: 10rpx;
		opacity: 0.9;
	}

	.overview-card {
		margin: -40rpx 30rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.overview-title {
		font-size: 28rpx;
		color: #888;
	}

	.overview-amount {
		font-size: 60rpx;
		font-weight: bold;
		margin: 10rpx 0 30rpx;
	}

	.overview-stats {
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #6bc7b6;
	}

	.stat-label {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.quick-add-card,
	.recent-records {
		margin: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.form-group {
		display: flex;
		flex-direction: column;
	}

	.amount-input,
	.remark-input {
		height: 80rpx;
		border: 1px solid #eee;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.category-selector {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.category-item {
		padding: 10rpx 30rpx;
		background-color: #f5f8fa;
		border-radius: 30rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.category-item.active {
		background-color: #6bc7b6;
		color: #fff;
	}

	.add-btn {
		height: 80rpx;
		background-color: #6bc7b6;
		color: #fff;
		border-radius: 10rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}

	.record-list {
		max-height: 600rpx;
		overflow-y: auto;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.record-item:last-child {
		border-bottom: none;
	}

	.record-category {
		font-size: 28rpx;
		font-weight: bold;
	}

	.record-date {
		font-size: 24rpx;
		color: #888;
		margin-top: 6rpx;
	}

	.record-remark {
		font-size: 24rpx;
		color: #888;
		margin-top: 6rpx;
	}

	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
	}

	.no-records {
		text-align: center;
		color: #888;
		font-size: 28rpx;
		padding: 40rpx 0;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-icon {
		font-size: 40rpx;
	}

	.tab-label {
		font-size: 22rpx;
		margin-top: 6rpx;
		color: #888;
	}

	.tab-item.active .tab-label {
		color: #6bc7b6;
	}
</style>